<template>
  <div class="list main-body clearfix">
    <h2>
      <i class="iconfont iconlistrec_icon_jiangpai" />
      <em class="blue-text">榜单</em>推荐 • List Recommendation
    </h2>
    <div class="welcome">
      <div class="topTitle">
        <h3>最受欢迎榜</h3>
      </div>
      <ul v-for="i in num" :key="i" class="clearfix">
        <li>
          <i class="iconfont iconlistrec_icon_mingci" />
        </li>
        <li>
          <img src="../../../assets/img/home/disnep.png" alt="">
        </li>
        <li>
          <h4>探路者的王子</h4>
        </li>
        <li>
          <p>专业制造专业制造专业制造</p>
        </li>
      </ul>
      <button>查看更多品牌 ></button>
    </div>
    <div class="Like welcome">
      <div class="topTitle">
        <h3>最受喜爱榜</h3>
      </div>
      <ul v-for="i in num" :key="i" class="clearfix">
        <li>
          <i class="iconfont iconlistrec_icon_mingci" />
        </li>
        <li>
          <img src="../../../assets/img/home/disnep.png" alt="">
        </li>
        <li>
          <h4>探路者的王子</h4>
        </li>
        <li>
          <p>专业制造专业制造专业制造</p>
        </li>
      </ul>
      <button>查看更多品牌 ></button>
    </div>
    <div class="Join welcome">
      <div class="topTitle">
        <h3>加盟品牌最多榜</h3>
      </div>
      <ul v-for="i in num" :key="i" class="clearfix">
        <li>
          <i class="iconfont iconlistrec_icon_mingci" />
        </li>
        <li>
          <img src="../../../assets/img/home/disnep.png" alt="">
        </li>
        <li>
          <h4>探路者的王子</h4>
        </li>
        <li>
          <p>专业制造专业制造专业制造</p>
        </li>
      </ul>
      <button>查看更多品牌 ></button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      num: 10
    }
  }
}
</script>

<style lang='scss' scoped>
  @import '../../../assets/template-item1/css/base.scss';
  .list{
    @include panel;
    .welcome{
      position: relative;
      width:390px;
      height: 100%;
      background:rgba(254,254,254,1);
      box-shadow:0px 2px 4px rgba(72,72,72,0.16);
      border-radius:4px;
      position: relative;
      margin-top: 40px;
      margin-bottom: 20px;
      float: left;
      .topTitle{
        width: 214px;
        height: 36px;
        background: url('../../../assets/img/home/list_rec_bg_red kuang.png') no-repeat;
        text-align: center;
        position: relative;
        top: -18px;
        left: 88px;
        h3{
          font-size:18px;
          line-height: 36px;
          color:rgba(239,65,65,1);
        }
      }
      ul{
        border-bottom: 1px solid #c0c0cc;
        padding: 15px;
        li{
          float: left;
          line-height: 36px;
          margin-right: 16px;

          i{
            color: #F4B957;
          }
          img{
            width:64px;
            height:36px;
            border:1px solid rgba(217,186,62,1);
            border-radius:4px;
          }
          h4{
            font-size:14px;
            line-height:36px;
            color:rgba(51,51,51,1);
          }
          p{
            font-size:12px;
            line-height:36px;
            color:rgba(153,153,153,1);
          }
        }
        li:nth-child(4){
          margin-right: 0;
        }
      }
      button{
        width:135px;
        height:40px;
        background:rgba(235,235,235,1);
        border:1px solid rgba(153,153,153,1);
        border-radius:4px;
        margin: 25px 120px;
      }
      button:hover{
        background-color: #ccc;
        border: none;
      }
    }
    .Like{
      margin-left: 15px;
      .topTitle{
        h3{
          color: #417AEF;
        }
        background: url('../../../assets/img/home/list_rec_bg_blue  kuang.png') no-repeat;
      }
    }
    .Join{
      margin-left: 15px;
      .topTitle{
        h3{
          color: #EF9841;
        }
        background: url('../../../assets/img/home/list_rec_bg_orange kuang.png') no-repeat;

      }
    }
  }

</style>
